{% extends '@open/index.twig' %}

{% set title = Page.title %}
    
{% block js %}
    {{ parent() }}
    <script src="{{ asset("js/jquery.fancybox.pack.js") }}"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                'openEffect': 'elastic',
                'closeEffect': 'elastic',
                helpers : {
                        title : {
                                type : 'inside'
                        }
                }
            });
            
            $(".gallery img").hide();
            $(".gallery img").fadeIn();
        });
    </script>
{% endblock js %}
    
{% block css %}
    {{ parent() }}
    <link href="{{ asset("css/fancybox2/jquery.fancybox.css") }}" rel="stylesheet" type="text/css" media="screen" />
{% endblock css %}

{% block content %} 
    <section class="wrapper c_block">
        <div class="shadow" style="margin-top: -23px;"></div>
        <article class="color col3-3">
            <header>
                <h2>{{ Page.title|raw }}</h2>
            </header>
            {{ Page.content|raw }}
        </article>
        <div class="clear"></div>
        <div class="gallery mt_20">
            {% if galleryItems %}
                {% for SOGI in galleryItems %}
                    <a href="{{ img(SOGI, {'src': true, crop: true}) }}" rel="gallery" title='{% if SOGI.title %}Заглавие: {{ SOGI.title|raw }}{% endif %}{%if SOGI.description%}<br />Описание: {{ SOGI.description|raw }}{% endif %}' class="fancybox">
                        <img src="{{ img(SOGI, {'src': true, 'width': 270, 'height': 200, 'crop': true}) }}" alt=""/>
                    </a>
                {% endfor %}
            {% else %}
                <b>{{ LRCSupport.label('message.noGalleryItems') }}</b>
                <br />
                <br />
            {% endif %}
        </div>
        <div class="clear"></div>
        <div class="shadow" style="margin-bottom: -31px;"></div>
    </section>
{% endblock %}